<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA协同办公系统</title>
</head>
<style type="text/css" >
.divuser{ background:#EBEBEB; width:650px; height:380px; border:#CCC double 2px}
</style>
<link type="text/css" rel="stylesheet" href="css/table.css">
<link rel="stylesheet" href="js/easyui/themes/default/easyui.css" />
   <link rel="stylesheet" href="js/easyui/themes/icon.css" />
   <script type="text/javascript" src="js/table.js"></script>
  <script type="text/javascript" src="js/easyui/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/select.js"></script>
		<script type="text/javascript">
		$(function(){
             $('#tt2').tree({   
                  checkbox: false, 
                 url: 'organizationTree.action',   
                  onBeforeExpand:function(node,param){
                      $('#tt2').tree('options').url = "organizationChildTree.action?orgId="+ node.id;// change the url                       
                     
                  },          
                  onClick:function(node){
						$(this).tree('toggle', node.target); 
						document.getElementById("userselect").style.display = "block";
						document.getElementById("userList").style.display = "none";     
                       getOrg(node.id);
                  }   
              });  
              setTimeout(loadGroup,200);
});

function loadGroup(){
 $('#group').tree({   
                  checkbox: false,   
                 url: 'getOrgAndGroup.action', 
                 onBeforeExpand:function(node,param){
                      $('#group').tree('options').url = "getGroupNo.action";// change the url                       
                     
                  },   
                  onClick:function(node){
                 		document.getElementById("userselect").style.display = "block";
						document.getElementById("userList").style.display = "none";
                       getGroup(node.id);
                  }   
              }); 
}
function getGroup(id){
	var  param={"organizationId":id};
	$.post("getGroupUser.action",param,function(data){
		var list=data.userList;
		var obj1=document.getElementById("obj1");
		clear(obj1);
		for(var i=0;i<list.length;i++){
			addItem(obj1,list[i].id,list[i].name);
		}
	},"json");

}

function getOrg(id){
	var  param={"organizationId":id};
	$.post("getUserOrg.action",param,function(data){
		var list=data.userList;
		var obj1=document.getElementById("obj1");
		clear(obj1);
		for(var i=0;i<list.length;i++){
			addItem(obj1,list[i].id,list[i].name);
		}
	},"json");

}

 function addUser(){
 	var status=$("#status").val();
	var obj = document.getElementById("obj2");
	  var array = getSelectArray(obj);
	  if(array.length==0){
	    alert("请选择人员");
	    return;
	  }
		var ids="";
	  for(var i=0;i<array.length;i++){
	  	if(ids==''){
	  		ids=array[i].value;
	  	}else{
	  		ids+=","+array[i].value;
	  	}
	  }
	  window.opener.setValue(ids,status);
	  window.close();
}
function searchList(){
	var name=$("#name").val();
	if($.trim(name)==''||$.trim(name)=='null'){
		$("#error").html("请输入关键字！");
		return;
	}else{
		$("#error").html("");
		var param={"name":name};
		$.post("searchJsonUser.action",param,function(data){
			var list=data.userList;
			var obj1=document.getElementById("obj1");
			clear(obj1);
			for(var i=0;i<list.length;i++){
				addItem(obj1,list[i].id,list[i].name);
			}
		},"json");
	}
}

var list;
function searchList(){
	var name=$("#name").val();
	if($.trim(name)==''||$.trim(name)=='null'){
		$("#error").html("请输入关键字！");
		return;
	}else{
		$("#error").html("");
		  document.getElementById("userList").style.display = "block";
		 document.getElementById("userselect").style.display = "none";
		   $("#tabllist").find("#row").remove();
		var param={"name":name};
		$.post("searchJsonUser.action",param,function(data){
			 list=data.userList;
			for(var i=0;i<list.length;i++){
			$("#tabllist").append("<tr id=\"row\" onmouseover=\"overStyle(this)\" onmouseout=\"outStyle(this)\"><td align=\"center\"><input type=\"checkbox\" name=\"ids\" value=\""+list[i].id+"\"></td><td>"+list[i].account+"</td><td>"+list[i].name+"</td><td>"+list[i].phone+"</td><td>"+list[i].orgName+"</td></tr>");
			}
		},"json");
	}
}

function addTableUser(){
	var status=$("#status").val();
	var arry="";
	var count=0;
	var checks=$("#tabllist").find("input[name='ids']");
	for(var i=0;i<checks.length;i++){
		if(checks[i].checked){
			if(arry==''){
			arry=checks[i].value;
			}else{
			arry+=","+checks[i].value;
			}
			count++;
		}
	}
	if(count==0){
		alert("请选择人员！");
		return;
	}
	window.opener.setValue(arry,status);
	 window.close();
}

</script>
<body >
<input id="status" type="hidden" value="${status}">
<table align="center"><tr><td>
<div class="divuser">
<h1 style="background:url(image/usebg.jpg); height:30px; margin:0; text-align:center; line-height:30px; font-size:16px">
选择人员</h1>
<div align="left" style="margin-left: 30px;"><span style="width: 250px;">姓名或账号：<input type="text" id="name" name="name"><input type="button"  class="button_02" onclick="searchList()" value="搜索"></span><font size="2" color="red" id="error"></font></div>
<div id="tree-div" style="float:left; width:180px; height:320px; border:#666 double 1px;overflow-y:auto;overflow-x:none;word-break:break-all;">
<ul id="tt2">
                    
 </ul>
 <ul id="group">
                    
 </ul>
</div>
<div style="width:400px; height:320px; border:#666 double 1px; float:left;overflow-y:auto;">
		<span id="userList" style="display: none;">
		<table id="tabllist" class="righ_list" frame="box" cellspacing="1"
							cellpadding="0" width="100%" border="0" >
			<tr class="reigh_list2">
				<th align="left" class="bg_tr" width="5%">
						<input type="checkbox" onclick="checkAll()" id="all">
					</th>
					<th align="left" width="20%">
						账户
					</th>
					<th align="left" width="20%">
						姓名
					</th>
					<th align="left" width="20%">
						手机
					</th>
					<th align="left">
						所属组织
					</th>
			</tr>
		</table>
		<table align="center">
			<tr><td><input type="button" onclick="addTableUser()" width="25px" class="button_02" value="确定" ></td></tr>
		</table>
		</span>
		<table border="0" id="userselect" > 
              <tr>
                <td>
                  <select name="possible" id="obj1" size="4" MULTIPLE style="width: 150px; height:310px;">
                    
                  </select>
                </td>
                <td align="center">
                <input type="button"   width="45px" onclick="func1()" class="button_02" value=">">
                <input type="button" width="25px" onclick="func3()" class="button_02" value=">>">
				  <br><br>
                  <input type="button"   class="button_02" width="45px" onclick="func2()" value="<">
                  <input type="button" width="25px" onclick="func4()" class="button_02" value="<<">
                  <br /><br />
                   <input type="button" onclick="addUser()" width="25px" class="button_02" value="确定" >
				</td>
                <td>
                  <select name="chosen" id="obj2" size="4" MULTIPLE style="width: 150px;height:310px">
                     
                  </select>
                </td>
              </tr>  
          </table>
</div>
</td></tr></table>
</body>
</html>